<template>
  <div>
    <div class="map-order-box" style="overflow: hidden">
      <div class="board-title">设备实时报警</div>
      <ul
        style="
          position: relative;
          list-style: none;
          font-size: 13px;
          padding: 5px;
        "
      >
        <li class="base-item display-flex justify-content-flex-center item-th">
          <span
            style="
              text-align: left;
              display: inline-block;
              width: 26%;
            "
            >设备名称</span
          >
          <span
            style="   
              display: inline-block;
              width: 20%;
              text-align: center;
            "
            >报警信息</span
          >
          <span
            style="
              text-align: center;
              display: inline-block;
              width: 20%;
            "
            >报警类型</span
          >
          <span
            style="    
              display: inline-block;
              width: 34%;
              text-align: center;
            "
            >报警时间</span
          >
        </li>
      </ul>
      <div v-if="list.length>0" class="base-info" id="base-info3" style="overflow: hidden">
        <ul
          id="base-ul3"
          style="position: relative; top: 0px; list-style: none"
        >
          <li class="base-item" v-for="(item, m) in list" :key="m + 'c'">
            <span
              style="
                text-align: left;
                display: inline-block;
                width: 26% !important;
                padding-left: 5px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
              >{{ item.alarmEquipmentName }}</span
            >
            <span
              style="
                text-align: center;
                display: inline-block;
                width: 20%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
              >{{ item.alarmMessage }}</span
            >
            <span
              style="
                display: inline-block;
                width: 20%;
                text-align: center;
              "
              >{{ typeFormat(item.alarmTypeId) }}</span
            >
            <span
              style="
                display: inline-block;
                width: 34%;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
              >{{ item.alarmTime }}</span
            >
          </li>
        </ul>
      </div>
      <div v-else class="no-list">暂无数据</div>
    </div>
  </div>
</template>

<script>
import roll from "@/utils/roll.js";
export default {
  data() {
      return{
          list:[],
          scroll:null,
          alarmTypeOptions:[]
      }
  },
  mounted(){
     //  报警类型
    this.getDicts("equipment_alarm_type").then(response => {
      this.alarmTypeOptions = response.data;
    });
  },
  methods: {
     typeFormat(alarmTypeId) {
      return this.selectDictLabel(this.alarmTypeOptions, alarmTypeId);
    },
    setList(data){
      this.list=data
      this.$nextTick(()=>{
         this.scroll = new roll.Roll(
        "base-info3",
        "base-ul3",
        "",
        -this.list.length * 25
      );
      })
    }
  },
};
</script>

<style scoped lang="scss">
.base-item {
  height: 32px;
  padding: 3px 0;
  box-sizing: border-box;
  font-size: 13px;
  letter-spacing: 1px;
  color: #606266;
  .icon {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
  }
}
.map-order-box{
  padding:10px;
    height:200px;
     background: #fff;
}
.item-th{
  font-weight: bold;
}
.no-list{
  text-align: center;
  color:#ccc;
  font-size: 13px;
}
</style>